<template>
  <el-card class="box-card">
    <template #header>
      <div class="card-header">
        <span>实名信息</span>
      </div>
    </template>
    <div class="tip">
      <svg
        t="1698217437072"
        class="icon"
        viewBox="0 0 1024 1024"
        version="1.1"
        xmlns="http://www.w3.org/2000/svg"
        p-id="4016"
        width="16"
        height="16"
      >
        <path
          d="M512 1024C230.4 1024 0 793.6 0 512S230.4 0 512 0s512 230.4 512 512S793.6 1024 512 1024zM512 85.333333C277.333333 85.333333 85.333333 277.333333 85.333333 512s192 426.666667 426.666667 426.666667 426.666667-192 426.666667-426.666667S746.666667 85.333333 512 85.333333z"
          p-id="4017"
          fill="#8a8a8a"
        ></path>
        <path
          d="M469.333333 768c-17.066667 0-29.866667-8.533333-42.666667-21.333333-21.333333-29.866667-4.266667-72.533333 42.666667-187.733333 8.533333-17.066667 17.066667-38.4 25.6-55.466667-17.066667 12.8-42.666667 12.8-59.733333-4.266667-17.066667-17.066667-17.066667-42.666667 0-59.733333C443.733333 435.2 494.933333 384 554.666667 384c17.066667 0 29.866667 8.533333 42.666667 21.333333 21.333333 29.866667 4.266667 72.533333-42.666667 187.733333-8.533333 17.066667-17.066667 38.4-25.6 55.466667 17.066667-12.8 42.666667-12.8 59.733333 4.266667 17.066667 17.066667 17.066667 42.666667 0 59.733333C580.266667 716.8 529.066667 768 469.333333 768z"
          p-id="4018"
          fill="#8a8a8a"
        ></path>
        <path
          d="M576 277.333333m-64 0a1.5 1.5 0 1 0 128 0 1.5 1.5 0 1 0-128 0Z"
          p-id="4019"
          fill="#8a8a8a"
        ></path>
        <path
          d="M576 362.666667c-46.933333 0-85.333333-38.4-85.333333-85.333333s38.4-85.333333 85.333333-85.333333 85.333333 38.4 85.333333 85.333333S622.933333 362.666667 576 362.666667zM576 234.666667c-25.6 0-42.666667 17.066667-42.666667 42.666667s17.066667 42.666667 42.666667 42.666667 42.666667-17.066667 42.666667-42.666667S601.6 234.666667 576 234.666667z"
          p-id="4020"
          fill="#8a8a8a"
        ></path>
      </svg>
      <p>
        完成实名认证之后才能添加就诊人，正常进行挂号，为不影响后续步骤，建议提前实名认证
      </p>
    </div>
    <div class="contend">
      <div
        class="form"
        v-if="
          userStore.userInfo?.realName == 0 || userStore.userInfo?.realName == 3
        "
      >
        <el-form
          :model="reaNameInfo"
          label-width="120px"
          :rules="rules"
          ref="form"
        >
          <el-form-item label="用户姓名" prop="reaName">
            <el-input
              placeholder="请输入真实姓名"
              v-model="reaNameInfo.reaName"
            ></el-input>
          </el-form-item>
          <el-form-item label="证件类型" prop="cardType">
            <el-select
              v-model="reaNameInfo.cardType"
              placeholder="请选择证件类型"
            >
              <el-option
                label="身份证"
                :value="1"
              />
              <el-option
                label="户口本"
                :value="2"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="证件号码" prop="cardNumber">
            <el-input
              placeholder="请输入证件号码"
              v-model="reaNameInfo.cardNumber"
            ></el-input>
          </el-form-item>
          <el-form-item label="上传图片" prop="cardImg">
            <el-upload
              class="avatar-uploader"
              action="http://121.40.96.76:3000/api/upload"
              :show-file-list="false"
              :on-success="handleAvatarSuccess"
              :before-upload="beforeAvatarUpload"
            >
              <img
                v-if="reaNameInfo.cardImg"
                :src="reaNameInfo.cardImg"
                class="avatar"
              />
              <img
                v-else
                src="../../../assets/images/auth_example.png"
                alt=""
              />
            </el-upload>
          </el-form-item>
          <el-form-item>
            <el-button type="danger" @click="reaset">重写</el-button>
            <el-button type="primary" @click="subMitReaNameInfo"
              >提交</el-button
            >
          </el-form-item>
        </el-form>
      </div>
      <div class="stepm" v-else-if="userStore.userInfo?.realName == 1">
        <el-steps
          style="max-width: 600px"
          :active="active"
          finish-status="success"
        >
          <el-step title="待申请" />
          <el-step title="审核中" />
          <el-step title="审核完成" />
        </el-steps>
      </div>
      <div class="success" v-else>
        <el-descriptions class="margin-top" :column="1" border>
          <el-descriptions-item>
            <template #label>
              <div class="cell-item">
                <el-icon>
                  <user />
                </el-icon>
                姓名
              </div>
            </template>
            {{ reaNames?.reaName }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template #label>
              <div class="cell-item">
                <el-icon>
                  <Postcard />
                </el-icon>
                证件类型
              </div>
            </template>
            {{ reaNames?.cardType == 1 ? "身份证" : "户口本" }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template #label>
              <div class="cell-item">
                <el-icon>
                  <Stamp />
                </el-icon>
                身份证号码
              </div>
            </template>
            {{ maskMiddleDigits(reaNames?.cardNumber + "") }}
          </el-descriptions-item>
        </el-descriptions>
      </div>
    </div>
  </el-card>
</template>

<script setup>
import { ref, reactive, onMounted , nextTick  } from "vue";
import { postReaNameAPI, getReaNameInfoAPI } from "@/api/user";
import { ElMessage } from "element-plus";
import useUserStore from "@/stores/moudels/userStore";
import { maskMiddleDigits } from "@/utils/string";
import { User, Postcard, Stamp } from "@element-plus/icons-vue";
let reaNameInfo = reactive({
  reaName: "",
  cardType: '',
  cardNumber: "",
  cardImg: "",
});
let reaNames = ref({});
let form = ref(null);
let active = ref(1);
let userStore = useUserStore();
onMounted(() => {
  getReaNameInfo();
  reaset()
});
//自定义表单校验
const validatorCard = (rule, value, callback) => {
  if (!value) {
    callback(new Error("请输入证件号码"));
  } else {
    //身份证号正则校验
    const reg = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/;
    if (reg.test(value)) {
      callback();
    } else {
      callback(new Error("请输入正确的证件号码"));
    }
  }
};
let rules = reactive({
  reaName: [
    { required: true, message: "请输入真实姓名", trigger: "blur" },
    { min: 2, max: 10, message: "长度在2-10个字符", trigger: "blur" },
  ],
  cardType: [{ required: true, message: "请选择证件类型", trigger: "blur" }],
  cardNumber: [
    { required: true, message: "请输入证件号码", trigger: "blur" },
    { validator: validatorCard, trigger: "change" },
  ],
  cardImg: [{ required: true, message: "请上传证件图片", trigger: "change" }],
});
const beforeAvatarUpload = (file) => {
  //类型只能是jpg或者png且大小在4m以内
  const isJPG = file.type === "image/jpeg" || file.type === "image/png";
  const isLt4M = file.size / 1024 / 1024 < 4;

  if (!isJPG) {
    ElMessage.error("上传头像图片只能是 JPG/PNG 格式!");
  }
  if (!isLt4M) {
    ElMessage.error("上传头像图片大小不能超过 4MB!");
  }
  return isJPG && isLt4M;
};
const reaset = () => {
  nextTick(()=>{
    form.value?.resetFields();
  })
  Object.assign(reaNameInfo, {
    reaName: "",
    cardType: "",
    cardNumber: "",
    cardImg: "",
  });
};
const handleAvatarSuccess = (res, file) => {
  reaNameInfo.cardImg = res.data;
};
const subMitReaNameInfo = async () => {
  await form.value.validate();
  await postReaNameAPI(reaNameInfo);
  ElMessage.success("提交实名申请成功，请耐心等待审核");
   userStore.getUserInfo();
};
//获取用户实名信息
const getReaNameInfo = async () => {
  if (userStore.userInfo?._id) {
    let result = await getReaNameInfoAPI(userStore.userInfo._id);
    reaNames.value = result.data;
  }
};
</script>

<style scoped lang="scss">
.box-card {
  .tip {
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .contend {
    margin: 20px auto;

    .form,
    .stepm,
    .success {
      width: 60%;
      margin-left: 18%;
    }
  }
}
</style>
<style scoped>
.avatar-uploader .avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>

<style>
.avatar-uploader .el-upload {
  border: 1px dashed var(--el-border-color);
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
  border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  text-align: center;
}
</style>
